<template>
  <div>
    <el-dialog :title="detail.surname + '氏祠堂资料管理'" :visible.sync="open" width="1000px" append-to-body>
      <el-tabs type="border-card" v-model="tabName">
        <el-tab-pane label="祠堂灵位" name="tab1">
          <el-table :data="tabletList">
            <el-table-column label="编号" align="center" type="index"/>
            <el-table-column label="逝者照片" align="center">
              <template slot-scope="scope">
                <el-image style="width: 60px; height: 60px"
                          :src="photoUrl(scope.row.ancestralHallMember.photoUrl)"></el-image>
              </template>
            </el-table-column>
            <el-table-column label="逝者姓名" align="center" prop="ancestralHallMember.name"/>
            <el-table-column label="性别" align="center">
              <template slot-scope="scope">
                <dict-tag :options="dict.type.sys_user_sex" :value="scope.row.ancestralHallMember.sex"/>
              </template>
            </el-table-column>
            <el-table-column label="故居地" align="center">
              <template slot-scope="scope">
                <span>{{dataFormat(scope.row.ancestralHallMember.address)}}</span>
              </template>
            </el-table-column>
            <el-table-column label="出生日期" align="center" width="180">
              <template slot-scope="scope">
                <span>{{dateTypeFormat(scope.row.ancestralHallMember.birthdayType,scope.row.ancestralHallMember.birthday)}}</span>
              </template>
            </el-table-column>
            <el-table-column label="逝世日期" align="center" width="180">
              <template slot-scope="scope">
                <span>{{dateTypeFormat(scope.row.ancestralHallMember.deathDayType,scope.row.ancestralHallMember.deathDay)}}</span>
              </template>
            </el-table-column>
            <el-table-column label="墓志铭" align="center" width="180" show-tooltip-when-overflow>
              <template slot-scope="scope">
                <span>{{dataFormat(scope.row.ancestralHallMember.epitaph)}}</span>
              </template>
            </el-table-column>
            <el-table-column label="个人简介" align="center" width="180" show-tooltip-when-overflow>
              <template slot-scope="scope">
                <span>{{dataFormat(scope.row.ancestralHallMember.introduction)}}</span>
              </template>
            </el-table-column>
          </el-table>
          <pagination
              v-show="tabletTotal>0"
              :total="tabletTotal"
              :page.sync="tabletParams.pageNum"
              :limit.sync="tabletParams.pageSize"
              @pagination="getTabletList"
          />
        </el-tab-pane>
        <el-tab-pane label="家族成员" name="tab2">
          <el-table :data="memberList">
            <el-table-column label="编号" align="center" type="index"/>
            <el-table-column label="照片" align="center">
              <template slot-scope="scope">
                <el-image style="width: 60px; height: 60px"
                          :src="photoUrl(scope.row.photoUrl)"></el-image>
              </template>
            </el-table-column>
            <el-table-column label="姓名" align="center" prop="name"/>
            <el-table-column label="性别" align="center">
              <template slot-scope="scope">
                <dict-tag :options="dict.type.sys_user_sex" :value="scope.row.sex"/>
              </template>
            </el-table-column>
            <el-table-column label="居住地" align="center">
              <template slot-scope="scope">
                <span>{{dataFormat(scope.row.address)}}</span>
              </template>
            </el-table-column>
            <el-table-column label="出生日期" align="center" width="180">
              <template slot-scope="scope">
                <span>{{dateTypeFormat(scope.row.birthdayType,scope.row.birthday)}}</span>
              </template>
            </el-table-column>
            <el-table-column label="逝世日期" align="center" width="180">
              <template slot-scope="scope">
                <span>{{dateTypeFormat(scope.row.deathDayType,scope.row.deathDay)}}</span>
              </template>
            </el-table-column>
            <el-table-column label="墓志铭" align="center" width="180" show-tooltip-when-overflow>
              <template slot-scope="scope">
                <span>{{dataFormat(scope.row.epitaph)}}</span>
              </template>
            </el-table-column>
            <el-table-column label="个人简介" align="center" width="180" show-tooltip-when-overflow>
              <template slot-scope="scope">
                <span>{{dataFormat(scope.row.introduction)}}</span>
              </template>
            </el-table-column>
          </el-table>
          <pagination
              v-show="memberTotal>0"
              :total="memberTotal"
              :page.sync="memberParams.pageNum"
              :limit.sync="memberParams.pageSize"
              @pagination="getMemberList"
          />
        </el-tab-pane>
        <el-tab-pane label="家族相册" name="tab3">
          <template v-if="!selectedAlbumGroup.id">
            <div class="album-layout">
              <div @click="toAlbumList(album)" v-for="(album,index) in albumGroupList" :key="index"
                   class="album-item">
                <div style="position: relative;">
                  <el-image class="album" :src="baseImageUrl + album.coverUrl"></el-image>
                  <div class="album-control">
                    <span></span>
                    <el-button
                        size="small"
                        type="text"
                        icon="el-icon-delete"
                        @click.stop="handleAlbumGroupDelete(album)"
                        v-hasPermi="['service:hall:remove']">
                    </el-button>
                  </div>
                </div>
                <div class="album-name">{{album.name}}</div>
              </div>
            </div>
          </template>
          <template v-else>
            <el-button @click="selectedAlbumGroup = {}" style="margin-left: 12px"
                       icon="el-icon-back">返回上一级
            </el-button>
            <div class="album-layout">
              <div v-for="(album,index) in albumList" :key="index" class="album-item">
                <el-image v-if="album.type===0"
                          class="album"
                          :src="baseImageUrl + album.url"
                          :preview-src-list="[baseImageUrl + album.url]"></el-image>
                <video v-else class="album"
                       :src="baseImageUrl + album.url"
                       controls>
                </video>
                <div class="album-control">
                  <span>{{album.status===1?'正常':'未审核'}}</span>
                </div>
              </div>
            </div>
          </template>
        </el-tab-pane>
        <el-tab-pane label="哀思留言" name="tab4">
          <el-table :data="commentList">
            <el-table-column label="编号" align="center" type="index"/>
            <el-table-column label="头像" align="center">
              <template slot-scope="scope">
                <el-image style="width: 50px; height: 50px" :src="headPortrait(scope.row.photoUrl)"></el-image>
              </template>
            </el-table-column>
            <el-table-column label="留言人" align="center" prop="nickName"/>
            <el-table-column label="留言内容" align="center" prop="content" width="260"/>
            <el-table-column label="留言时间" align="center" prop="createTime" width="180"/>
            <el-table-column label="状态" align="center" prop="status">
              <template slot-scope="scope">
                <span>{{scope.row.status===1?'正常':'未审核'}}</span>
              </template>
            </el-table-column>
          </el-table>
          <pagination
              v-show="commentTotal>0"
              :total="commentTotal"
              :page.sync="commentParams.pageNum"
              :limit.sync="commentParams.pageSize"
              @pagination="getCommentList"
          />
        </el-tab-pane>
      </el-tabs>
    </el-dialog>
  </div>
</template>

<script>
  import {listTablet} from "@/api/service/ancestral-tablet";
  import {listMember} from "@/api/service/ancestral-member";
  import {listComment, delComment} from "@/api/service/ancestral-comment";
  import {listAlbum, delAlbum} from "@/api/service/ancestral-album";
  import {listAlbumGroup} from "@/api/service/ancestral-album-group";

  export default {
    name: "setting",
    dicts: ['sys_user_sex'],
    data() {
      return {
        baseImageUrl: process.env.VUE_APP_BASE_API,
        open: false,
        tabName: 'tab1',
        detail: {},
        commentList: [],
        commentTotal: 0,
        commentParams: {
          pageNum: 1,
          pageSize: 10
        },
        albumGroupList: [],
        albumList: [],
        tabletList: [],
        tabletTotal: 0,
        tabletParams: {
          pageNum: 1,
          pageSize: 10
        },
        memberList: [],
        memberTotal: 0,
        memberParams: {
          pageNum: 1,
          pageSize: 10
        },
        selectedAlbumGroup: {}
      }
    },
    methods: {
      /** 逝者头像地址 */
      photoUrl(photoUrl) {
        return photoUrl ? this.baseImageUrl + photoUrl : require('@/assets/images/profile.jpg');
      },
      /** 数据格式化 */
      dataFormat(data) {
        return data ? data : '-'
      },
      /* 显示弹窗 */
      show(row) {
        this.selectedAlbumGroup = {}
        this.open = true;
        this.detail = Object.assign({}, row);
        this.tabletList = [];
        this.memberList = [];
        this.albumList = [];
        this.commentList = [];
        this.tabletParams.pageNum = 1;
        this.memberParams.pageNum = 1;
        this.commentParams.pageNum = 1;
        this.getTabletList();
        this.getMemberList();
        this.getCommentList();
        this.getAlbumGroupList();
      },
      /** 查询哀思留言列表 */
      getCommentList() {
        this.commentParams.ancestralHallId = this.detail.id;
        listComment(this.commentParams).then(response => {
          this.commentList = response.rows;
          this.commentTotal = response.total;
        });
      },
      /* 删除哀思留言 */
      handleCommentDelete(row) {
        this.$modal.confirm('确定删除这条留言？').then(() => {
          delComment(row.id).then(response => {
            this.$modal.msgSuccess("删除成功");
            this.getCommentList();
          });
        }).catch(() => {
        });
      },
      /** 查询纪念相册分组列表 */
      getAlbumGroupList() {
        listAlbumGroup({ancestralHallId: this.detail.id}).then(response => {
          this.albumGroupList = response.data;
        });
      },
      /* 查看纪念相册 */
      toAlbumList(album) {
        this.selectedAlbumGroup = album;
        this.getAlbumList()
      },
      /** 查询纪念相册列表 */
      getAlbumList() {
        listAlbum({ancestralHallId: this.detail.id, groupId: this.selectedAlbumGroup.id}).then(response => {
          this.albumList = response.data;
        });
      },
      /* 删除纪念相册 */
      handleAlbumDelete(row) {
        this.$modal.confirm('确定删除这' + (row.type === 0 ? '张照片' : '条视频') + '？').then(() => {
          delAlbum(row.id).then(response => {
            this.$modal.msgSuccess("删除成功");
            this.getAlbumList();
          });
        }).catch(() => {
        });
      },
      /* 获取用户头像 */
      headPortrait(headPortrait) {
        if (headPortrait) {
          return headPortrait.indexOf('http') !== -1 ? headPortrait : this.baseImageUrl + headPortrait;
        }
      },
      /* 查询祠堂灵位 */
      getTabletList() {
        this.tabletParams.ancestralHallId = this.detail.id;
        listTablet(this.tabletParams).then(res => {
          this.tabletList = res.rows;
          this.tabletTotal = res.total;
        })
      },
      /* 查询家族成员 */
      getMemberList() {
        this.memberParams.ancestralHallId = this.detail.id;
        listMember(this.memberParams).then(res => {
          this.memberList = res.rows;
          this.memberTotal = res.total;
        })
      },
      /* 日期类型格式化 */
      dateTypeFormat(type, date) {
        switch (type) {
          case 0:
            return '农历' + date;
          case 1:
            return date;
          case 2:
            return '公元前' + date;
          case 3:
            return '不详';
          default:
            return '-';
        }
      }
    },
    watch: {
      open(val) {
        if (!val) {
          this.tabName = 'tab1'
        } else {
        }
      }
    },
    mounted() {
    }
  }
</script>

<style lang="scss" scoped>
  .famous-key-layout {
    display: flex;
    align-items: center;
    margin-bottom: 24px;
    .famous-key-title {
      font-size: 16px;
      font-weight: bold;
    }
    .famous-key {
      font-size: 14px;
      margin: 0 12px;
    }
  }

  .article-layout {
    .header-layout {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 16px;
      .author-layout {
        display: flex;
        align-items: center;
        span {
          margin-left: 12px;
          font-size: 18px;
        }
      }
      .time {
        color: #999999;
      }
    }
    .content {
      line-height: 26px;
      white-space: pre-wrap;
    }
    .picture-layout {
      display: flex;
      flex-wrap: wrap;
      margin-left: -8px;
      margin-right: -8px;
      .picture-item {
        flex-basis: 33.33%;
        padding-left: 8px;
        padding-right: 8px;
        height: 200px;
        margin-top: 16px;
      }
    }
  }

  .album-layout {
    display: flex;
    flex-wrap: wrap;
    margin-left: -8px;
    margin-right: -8px;
    .album-item {
      flex-basis: 20%;
      padding-left: 8px;
      padding-right: 8px;
      margin-top: 16px;
      position: relative;
      .album-name {
        text-align: center;
        margin-top: 8px;
      }
      .album {
        width: 100%;
        height: 200px;
      }
      .album-control {
        position: absolute;
        bottom: 0;
        left: 8px;
        right: 8px;
        height: 32px;
        padding: 0 12px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: #ffffff;
        font-size: 12px;
        background: rgba($color: #000000, $alpha: 0.8);
      }
    }
  }

  .story-layout {
    .title-layout {
      padding: 12px 4px;
      font-size: 18px;
      border-bottom: 1px solid #dddddd;
      .title {
        font-weight: bold;
      }
      .name {
        margin-left: 8px;
      }
    }
  }
</style>
